import React from 'react'
import { Link } from '../react-router-dom'
import { UserAPI } from '../utils'

function UserList() {
  const [users, setUsers] = React.useState([])
  React.useEffect(() => {
    let users = UserAPI.list() // 获取用户列表
    setUsers(users) // 保存到 users 中
  }, [])
  return <ul>
    {
      users.map((user, index) => {
        return <li key={user.id} >
          {/* 添加一个 state 属性 跳转后可以通过 location.state 拿到值 */}
          <Link to={`/user/detail/${user.id}`} state={user} >{user.name}</Link>
        </li>
      })
    }
  </ul>
}

export default UserList
